<template>
    <view class="card-box">
        <view class="title-box">
            <view class="title">{{title}}</view>
            <view v-if="$slots.rightTitle">
                <slot name="rightTitle"></slot>
            </view>
            <view v-else>{{ rightTitle }}</view>
        </view>
        <view class="content">
            <block v-if="contentData" v-for="(item,idx) in contentOption" :key="item.name+'-'+idx">
                <view>{{ item.label }}:{{ contentData[item.name] }}</view>
            </block>
        </view>
        <view class="act-box">
            <block v-for="act in actList" :key="act.label">
                <view class="btn" :class="'text-'+act.type" @click="act.click(contentData)">
                    <view>{{act.label}}</view>
                </view>
            </block>
        </view>
    </view>
</template>

<script lang="ts">

    type TypeContentOption={
        label:String,
        name:String,
        render:Function
    }
    type TypeActList={
        label:String,
        click:Function,
        type:String
    }

    export default {
        name:"CardBox",
        options: { styleIsolation: 'shared' },
        data:()=>{ 
            return {}
        },
        props:{
            title:String,
            rightTitle:String,
            contentOption:Array,
            contentData:Object,
            actList:Array
        },
        methods: {
            close(){
                this.show=false
            },
            open(){
                this.show=true
            },
            logout(){
                uni.redirectTo({
                    url:"/pages/login"
                })
            }
        }
    }

</script>

<style lang="scss" scoped>
    @import "@/uni.scss";
	.act-box{
		display: flex;
		font-weight: bold;
		align-items: center;
		justify-content: space-around;
		.btn{
			
			width: 100%;
			text-align: center;
			border-top: 1px solid #c3bdbd;
			margin-top: 10px;
			view{
				margin-top: 10px;
				border-right: 1px solid #c3bdbd;
			}
			&:last-child view{
				border-right: 0px;
			}
		}
	}
	.card-box{
		background-color: #fff;
		width: 79%;
		margin: 0 auto;
		border-radius: 20upx;
		padding: 20upx;
		box-shadow: 0 0 8upx 0px #717070;
		margin-top: 20upx;
        margin-bottom: 10upx;
		font-size: 28upx;
		.title-box{
			display: flex;
			justify-content: space-between;
			color: #969696;	
			.title{
				font-weight: bold;
				color: #000;
			}
		}
		.content{
			display: flex;
            margin-top: 20upx;
            flex-wrap: wrap;
			view{
				margin-right: 20upx;
                margin-bottom: 20upx;
			}
		}
	}
</style>